
<template>
  <div class="menu_opt_file_box">
      <div class="menu_opt_file_mid">
            <div class="menu_opt_file_tree">
            <h3 class="menu_opt_file_h4">可选择页面</h3>
                <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
                <el-tree
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                show-checkbox
                node-key="id"
                :check-strictly="true"
                default-expand-all
                :filter-node-method="filterNode"
                :render-content="renderContent"
                :default-checked-keys="treeChecked"
                ref="tree"
                ></el-tree>
            </div>
            <div class="menu_opt_file_list">
            <h3 class="menu_opt_file_h4">已选择页面</h3>
            <el-checkbox-group v-model="checkList" class="menu_opt_file_check_group">
                <el-checkbox  v-for="item in addList" :label="item.id" :key="item.id" class="menu_opt_file_check">
                    {{item.label}}
                </el-checkbox>
            </el-checkbox-group>
            </div>
            <div class="menu_opt_file_transfer_l menu_opt_file_transfer" @click="getBackItem"></div>
            <div class="menu_opt_file_transfer_r menu_opt_file_transfer" @click="getCheckedItem"></div>
        </div>

    
  </div>
</template>
​<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
    created() {
    },
    mounted() {
      this.$refs.tree.filter('');
      
      this.updateCheckedItem()
    },
  methods: {
    filterNode(value, data) {
        console.log(value, data);
        if(data.sType == 2) return false;
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    renderContent(h, { node, data, store }) {
      let icon = "fileIcon1";
      console.log(node,data);
      if (node.childNodes.length > 0) {
        return (
          <span class="custom-tree-node menu_opt_file_no_check">
            <span>
              <img
                src={require("@/assets/img/" + icon + ".svg")}
                class="img-responsive"
                alt="Image"
              />
            </span>
            <span>{node.label}</span>
          </span>
        );
      } else{
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
          </span>
        );
      }
    },
    getCheckedItem(){
        this.addList = [];
        let checkedNodes = this.$refs.tree.getCheckedNodes();
        console.log(checkedNodes,"checkedNodes");
        if(checkedNodes.length > 0){
            checkedNodes.map((e,i) =>{
                if(!e.children){
                    e.sType = 2;
                    let obj = {}
                    obj['id'] = e['id']
                    obj['label'] = e['label']
                    this.addList.push(obj);
                }
            })
        }
        console.log(this.checkList,"checkList");
      this.$refs.tree.filter('');
    },
    backDataSearch(id,data){
        data.map(e =>{
            if(e.children && e.children.length>0){
                this.backDataSearch(id,e.children);
            }else if(e.id == id){
                e.sType = 1
            }else{
                return false;
            }
        })
    },
    getBackItem(){
        console.log(this.checkList,"checkList");
        if(this.checkList.length > 0){
            this.checkList.map(item =>{
                this.backDataSearch(item,this.data);
                this.addList.map((e,i) =>{
                    if(e.id == item){
                        this.addList.splice(i,1);
                    }
                })
            })
        }
        let newArr = []
        this.addList.map(e =>{
            newArr.push(e.id)
        })
        this.$refs.tree.setCheckedKeys(newArr);
        this.checkList = [];

      this.$refs.tree.filter('');
    },
    // 初始化数据到右侧
   updateDataSearch(data,arr){
        data.map(e =>{
            if(e.children && e.children.length>0){
                this.updateDataSearch(e.children,arr);
            }else if(e.sType == 2){
                arr.push(e)
                this.treeChecked.push(e.id)
            }else{
                return false;
            }
        })
    },
    updateCheckedItem(){
        this.addList=[];
        this.treeChecked = [];
        this.updateDataSearch(this.data,this.addList)
    }

  },

  data() {
    return {
        checkList:[],
        addList:[],
        treeChecked:[],
      filterText: "",
      data: [
        {
          id: 1,
          label: "一级 1",
          sType: 1,
          children: [
            {
              id: 4,
              label: "二级 1-1",
              sType: 1,
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                  sType: 1,
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                  sType: 2,
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          sType: 1,
          children: [
            {
              id: 5,
              label: "二级 2-1",
              sType: 1,
            },
            {
              id: 6,
              label: "二级 2-2",
              sType: 2,
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          sType: 1,
          children: [
            {
              id: 7,
              label: "二级 3-1",
              sType: 1,
            },
            {
              id: 8,
              label: "二级 3-2",
              sType: 1,
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
};
</script>

​
<style>
.menu_opt_file_box {
  width: 680px;
}
.menu_opt_file_top{
    padding: 20px;
    background-color: #12243a;
    box-shadow: 0px 0px 10px 0px rgb(7, 81, 92) inset;
    box-sizing: content-box;
}
.menu_opt_file_h3{
    margin-bottom: 20px;
    color: #00FFFF;
    font-size: 18px;
}
.menu_opt_file_h4{
    color: #00FFFF;
    font-size: 18px;
}
.menu_opt_file_mid{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    position: relative;
}
.menu_opt_file_tree,.menu_opt_file_list{
     width: 240px;
    height: 575px;
    overflow: auto;
    padding: 20px;
    background-color: #12243a;
    box-shadow: 0px 0px 10px 0px rgb(7, 81, 92) inset;
    box-sizing: content-box;
}
.menu_opt_file_tree .conshow.test-1{
    margin: 0;
    height: auto !important;
    min-height: 487px;
}
.menu_opt_file_check_group{
    margin-top: 10px;
    display: block;
}
.menu_opt_file_check.el-checkbox{
    display: block;
    text-align: left;
}
.menu_opt_file_transfer{
    width: 47px;
    height: 32px;
    background: url("~@/assets/img/left.svg") no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -24px;
    cursor: pointer;
}
.menu_opt_file_transfer_r{
    margin-top: -52px;
    transform: rotateZ(180deg);
}
.menu_opt_file_transfer_l{
    margin-top: 20px;
}
.menu_opt_file_box .el-icon-caret-right+.el-checkbox{
    display: none;
}
.menu_opt_file_box .el-tree-node__expand-icon.is-leaf +.el-checkbox{
    display: inline;
}
</style>